<style>
    #texteditor{
        float:right;
        width:45%;
    }
    #gridResourceTheme{
        width:45%;
        float:left;
    }
    #slider{
        width:100%;
        max-height: 410px;
    }
    .min{
        width:100%;
        max-height: 410px;
    }
    #sendQuestionsFAQ{
        float:right;
        width:45%;
    }
    #questionsFAQ{
        width:45%;
        float:left;
    }
    #textFAQ{
        width: 100%;
        height: 242
    }
    #blockElements{
        
    }
</style>
<script language='javascript'>
    var img='';
    $(document).ready(function() {
        var dsResources = new Ext.data.JsonStore({
//            autoLoad: true,
//            proxy: new Ext.data.HttpProxy({
//                url: BASE_URL + 'administracion/abastecimiento/getClientList',
//                method: 'POST',
//                reader: {
//                    type: 'json',
//                    root: 'items'
//                            //totalProperty: 'results'
//                }}),
             proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            data:{'items':[
                { 'id': '1',  "archives":"archivo-1",  "description":"descripcion-1"  },
                { 'id': '2',  "archives":"archivo-2",  "description":"descripcion-2" },
                { 'id': '3', "archives":"archivo-3",  "description":"descripcion-3"  },
                { 'id': '4', "archives":"archivo-4", "description":"descripcion-4"  },
                { 'id': '5',  "archives":"archivo-1",  "description":"descripcion-1"  },
                { 'id': '6',  "archives":"archivo-2",  "description":"descripcion-2" },
                { 'id': '7', "archives":"archivo-3",  "description":"descripcion-3"  },
                { 'id': '8', "archives":"archivo-4", "description":"descripcion-4"  },
                { 'id': '9',  "archives":"archivo-1",  "description":"descripcion-1"  },
                { 'id': '10',  "archives":"archivo-2",  "description":"descripcion-2" },
                { 'id': '11', "archives":"archivo-3",  "description":"descripcion-3"  },
                { 'id': '12', "archives":"archivo-4", "description":"descripcion-4"  }
            ]},
            fields: [{name: 'id', type: 'string'},
                {name: 'archives', type: 'string'},
                {name: 'description', type: 'string'}]
        });
        
        var dsSlides = new Ext.data.JsonStore({
//            autoLoad: true,
//            proxy: new Ext.data.HttpProxy({
//                url: BASE_URL + 'administracion/abastecimiento/getClientList',
//                method: 'POST',
//                reader: {
//                    type: 'json',
//                    root: 'items'
//                            //totalProperty: 'results'
//                }}),
             proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            },
            data:{'items':[
                { 'id': '1',  "url":'<img class="min" width="200" height="485" src="http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.infinity-spd.com-Fantasticas-20.jpg"/>',  "description":"diapositiva-1"  },
                { 'id': '2',  "url":'<img class="min" width="200" height="485" src="http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.infinity-spd.com-Fantasticas-20.jpg"/>',  "description":"diapositiva-2" },
                { 'id': '3', "url":'<img class="min" width="200" height="485" src="http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.infinity-spd.com-Fantasticas-20.jpg"/>',  "description":"diapositiva-3"  },
                { 'id': '4', "url":'<img class="min" width="200" height="485" src="http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.infinity-spd.com-Fantasticas-20.jpg"/>', "description":"diapositiva-4"  }
            ]},
            fields: [{name: 'id', type: 'string'},
                {name: 'url', type: 'string'},
                {name: 'description', type: 'string'}]
        });
        
        var resources  = Ext.create('Ext.grid.Panel',{
            id:'gridResources',
            layout:'fit',
            scroll:true,
            height:242,
            width:'100%',
            autoScroll:true,
            autoSizeColumns: true,
            frame:false,
            columnLines: true,
            forceFit:true,
            selModel:new Ext.selection.RowModel({singleSelect:true}),
            loadMask:true,
            renderTo: 'gridResourceTheme',
            store:dsResources,
            columns:[{header:'Archivos',dataIndex:'archives',width:30},
                {header:'Descripción',dataIndex:'description',width:67}]
        });
        
        Ext.create('Ext.panel.Panel', {
        width: '99%',
        height: screen.height-235,
        layout: 'border',
        id:'selPanel',
        items: [{
            title: 'Listado de Diapositivas',
            region: 'west',     
            xtype: 'panel',
            split: true,   
            margins: '5 5 5 5',
            width: 300,
            collapsible: true, 
            layout: 'fit',
            id: 'listSlides',
            items:[
                {
                    id: 'gridMySlides',
                    xtype: 'grid',
                    layout: 'fit',
                    scroll: true,
                    width: '100%',
                    autoScroll: true,
                    autoSizeColumns: true,
                    frame: false,
                    selModel: new Ext.selection.RowModel({singleSelect: true}),
                    loadMask: true,
                    store:dsSlides,
                    columns: [
                        {header: 'ID', hidden:true, align: 'center', dataIndex: 'id'},
                        {header: 'URL', flex: 0.08, align: 'left', dataIndex: 'url'},
                        {header: 'NOMBRE', flex: 0.15, dataIndex: 'description'}
                        ],
                    viewConfig:{
                            listeners:{
                                cellclick: function(g, td, cellIndex, record, tr, rowIndex, e, eOpts){
                                     var rec    = g.getStore().getAt(rowIndex);
                                     img=rec.raw.url;
                                     Ext.getCmp('showSlides').update(img+'<center><button id="actionBack"><</button><button id="actionPlay">PLAY</button><button id="actionPause"> | | </button><button id="actionGo">></button><center>');
                                     Ext.getCmp('showSlides').doLayout();
                                  }
                            }
                        }
                 }
            ]
            },{
                title: '¿Que desea hacer?',
                region:'center',
                xtype: 'panel',
                margins: '5 5 5 5',
                id: 'showSlides',
                html:img+'<center><button id="actionPlay">PLAY</button><button id="actionPause"> | | </button><center>'
            },{
               title: 'Listado de Preguntas',
                region: 'east',     
                xtype: 'panel',
                split: true,   
                margins: '5 5 5 5',
                width: 500,
                collapsible : true,
                collapsed : true,
                autoScroll: true,
                scroll: true,
                layout: 'fit',
                id: 'questions',
                html:'<form>\n\
                      <fieldset><legend>Pregunta 1</legend>\n\
                        <input type="radio" name="resp1" value=1/>Respuesta 1 <br />\n\
                        <input type="radio" name="resp1" value=2/>Respuesta 2 <br />\n\
                        <input type="radio" name="resp1" value=3/>Respuesta 3 <br />\n\
                        <input type="radio" name="resp1" value=4/>Respuesta 4 <br /></fieldset>\n\
                      <fieldset><legend>Pregunta 2</legend>\n\
                        <input type="radio" name="resp2" value=1/>Respuesta 1 <br />\n\
                        <input type="radio" name="resp2" value=2/>Respuesta 2 <br />\n\
                        <input type="radio" name="resp2" value=3/>Respuesta 3 <br />\n\
                        <input type="radio" name="resp2" value=4/>Respuesta 4 <br /></fieldset>\n\
                      <fieldset><legend>Pregunta 3</legend>\n\
                        <input type="radio" name="resp3" value=1/>Respuesta 1 <br />\n\
                        <input type="radio" name="resp3" value=2/>Respuesta 2 <br />\n\
                        <input type="radio" name="resp3" value=3/>Respuesta 3 <br />\n\
                        <input type="radio" name="resp3" value=4/>Respuesta 4 <br /></fieldset>\n\
                      <fieldset><legend>Pregunta 4</legend>\n\
                        <input type="radio" name="resp4" value=1/>Respuesta 1 <br />\n\
                        <input type="radio" name="resp4" value=2/>Respuesta 2 <br />\n\
                        <input type="radio" name="resp4" value=3/>Respuesta 3 <br />\n\
                        <input type="radio" name="resp4" value=4/>Respuesta 4 <br /></fieldset>\n\
                    <button type="reset"/>Enviar</button>\n\
                    </form>' 
            }],
        renderTo: 'slideShow'
    });
    
        var gridQuestionsFAQ  = Ext.create('Ext.grid.Panel',{
            id:'gridQuestionsFAQ',
            layout:'fit',
            scroll:true,
            height:242,
            width:'100%',
            autoScroll:true,
            autoSizeColumns: true,
            forceFit:true,
            selModel:new Ext.selection.RowModel({singleSelect:true}),
            loadMask:true,
            renderTo: 'questionsFAQ',
            store:dsResources,
            columns:[{dataIndex:'description',width:67}]
        });
    });
</script>
<input id="hd_context" type="hidden" value="<?php echo $breadcumb;?>"/>
<div id="blockGridText">
    <div id="gridResourceTheme">
    </div>
    <div id="textEditor">
        <form>
                <textarea id="editor" name="editor1" rows="10" cols="80">
                    <!--texto php-->
                </textarea>
                <script>
                    CKEDITOR.replace( 'editor' );
                </script>
         </form>
    </div>
</div>

<div id='slideShow'>    
</div>

<div id="blockGridQuestions">
    <div id='questionsFAQ'>
        <legend>Preguntas Frecuentes</legend>
    </div>
    <div id='sendQuestionsFAQ'>
            <form>
                <legend>Envíanos tu pregunta si no la encuentras en Preguntas Frecuentes</legend>
                <textarea id="textFAQ">
                </textarea>
                <button type="reset"/>Enviar</button>
            </form>
    </div>
</div>

<div id="blockElements">
    <fieldset>
        <a href=" <?php echo $link='';?> ">Casos Clínicos</a>
    </fieldset>
</div>